<template>
  <div class="container" style="overflow-x:hidden">
    <van-tabs color="#ffc300" @change="toggle" sticky>
      <van-tab title="今日配送" name="1"></van-tab>
      <van-tab title="历史配送" name="2"></van-tab>
      <van-tab title="审核过滤" name="3"></van-tab>
      <van-tab title="未配送" name="4"></van-tab>
      <van-tab title="配送中" name="5"></van-tab>
      <van-tab title="已配送" name="6"></van-tab>
      <van-tab title="已拒绝" name="7"></van-tab>
    </van-tabs>
    <!-- <div class="handle">
      <div class="handleButton" @click="selectRoot">{{fatherCategoryName}}</div>
      <div class="handleButton" @click="selectSub">{{categoryName}}</div>
      <div class="handleButton" @click="pass">{{statusName}}</div>
      <div class="handleButton" @click="initZZZ">重置</div>
    </div>-->
    <!-- <div class="add" @click.stop="add">+</div> -->
    <div class="mainArea">
      <div class="count">
        <div class="badge">
          总计:
          <span>{{count}}条</span>
        </div>
      </div>
      <div class="card" v-for="(item,index) in list" :key="index" @click.stop="goDetail(item.id)">
        <div class="topArea">
          <div style="max-width: 400rpx;">配送客户：{{item.createUser?item.createUser.company.name:"未知"}}</div>
          <div
            class="status"
            v-if="item.status=='仓管审核中'||item.status=='项目经理审核中'||item.status=='采购审核中'||item.status=='总仓审核中'"
          >{{item.status}}</div>
          <div
            class="status"
            v-if="item.status=='总仓已审核'||item.status=='配送中'"
            style="background:#07c160;color:#fff"
          >{{item.status}}</div>
          <div
            class="status"
            v-if="item.status=='已配送'"
            style="background:gray;color:#fff"
          >{{item.status}}</div>
          <div
            class="status"
            v-if="item.status=='已拒绝'"
            style="background:#ee0a24;color:#fff"
          >{{item.status}}</div>
        </div>
        <div style="font-weight: bold;font-size: 44rpx;padding-left: 24rpx;">
          {{item.category?item.category.name:"商品进货中"}}
          <span
            class="isTrue"
            style="vertical-align:middle"
            v-if="item.category&&item.category.fresh=='on'"
          >生鲜</span>
          <span
            class="isTrue"
            style="background:#909399;vertical-align:middle"
            v-if="item.category&&item.category.fresh=='off'"
          >非生鲜</span>
        </div>
        <div class="main">
          <div class="leftArea">
            <div class="num">数量：*{{item.quantity}}{{item.category?item.category.unit:""}}</div>
            <div class="timeArea">订单创建时间：{{item.createTime}}</div>
            <div class="timeArea">预计配送时间：{{item.deliveryDate}}</div>
            <div style="margin-top:4px">
              <span class="codeTxt">配送编码：{{item.code}}</span>
            </div>
          </div>
          <div class="rightArea">
            <div v-if="item.cost<0">
              <span>时价</span>
            </div>
            <div v-else>
              <span style="font-size:28rpx">￥</span>
              <span>{{item.cost}}</span>
            </div>
          </div>
        </div>
        <div class="handleArea">
          <div
            class="confirmButton"
            style="background:#07c160;color:#FFF"
            v-if="item.status=='配送中'"
            @click.stop="supplement(item.id,index)"
          >临时补单</div>
          <div
            class="confirmButton"
            v-if="item.status=='配送中'"
            @click.stop="confirmDelivery(item,index)"
          >确认收货</div>
          <div
            class="confirmButton"
            v-if="item.status=='总仓已审核'"
            @click.stop="letsGoDelivery(item,index)"
          >开始配送</div>
          <div class="infoButton" @click.stop="startDelivery(item,index)">审核</div>
        </div>
      </div>
      <div class="bottomTips" v-if="stop">数据加载完啦</div>
    </div>
    <van-popup :show="showRoot" position="bottom" close-on-click-overlay>
      <van-picker
        :columns="columnsRoot"
        @confirm="onConfirmRoot"
        @cancel="onCancelRoot"
        show-toolbar
        title="请选择大类"
      />
    </van-popup>
    <van-popup :show="showSub" position="bottom" close-on-click-overlay>
      <van-picker
        :columns="columnsSub"
        @confirm="onConfirmSub"
        @cancel="onCancelSub"
        show-toolbar
        title="请选择小类"
      />
    </van-popup>
    <van-popup :show="showDialog" position="bottom" close-on-click-overlay>
      <van-picker
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        show-toolbar
        title="请选择是否需要审核"
      />
    </van-popup>
    <!-- <div class="add" @click.stop="add">+</div> -->
  </div>
</template>

<script>
import store from "@/utils/factory.js";
import { lostLogin, formatTime, formatDate } from "@/utils";
import {
  logout,
  getMsgList,
  confirmDelivery,
  getMsgDetail,
  startDelivery,
  letsGoDelivery,
  getRoot,
  getUndoList,
  getSub
} from "@/http";

export default {
  data() {
    return {
      formData: {
        startTime: "",
        endTime: "",
        source: "",
        project: "",
        name: "",
        phone: "",
        category: "",
        pass: ""
      },
      columns: [{ text: "是", code: "on" }, { text: "否", code: "off" }],
      isActive: 1,
      active: 1,
      count: 0,
      fatherCategoryName: "请选择大类",
      categoryName: "请选择小类",
      statusName: "审核过滤",
      ids: [],
      needTime: true,
      showDialog: false,
      showRoot: false,
      showSub: false,
      list: [],
      columnsSub: [],
      columnsRoot: [],
      identity: "员工",
      userName: "未设置昵称",
      userInfo: {},
      source: {
        report: "留言",
        400: "热线",
        add: "客户导入"
      },
      fatherCategory: "",
      project: {},
      stop: false,
      requestData: {
        page: 1,
        limit: 10
      },
      assign: false
    };
  },

  methods: {
    tel: function(phone) {
      mpvue.makePhoneCall({
        phoneNumber: phone
      });
    },
    onConfirmRoot(e) {
      this.fatherCategoryName = e.mp.detail.value.text;
      this.fatherCategory = e.mp.detail.value.code;
      this.getSub(e.mp.detail.value.code, 2);
      this.showRoot = false;
    },
    onConfirmSub(e) {
      this.categoryName = e.mp.detail.value.text;
      this.requestData.category = e.mp.detail.value.code;
      this.showSub = false;
      this.initData();
      this.getMsgList();
    },
    onConfirm(e) {
      this.statusName = e.mp.detail.value.text;
      this.requestData.pass = e.mp.detail.value.code;
      this.showDialog = false;
      this.initData();
      this.getMsgList();
    },
    onCancelRoot() {
      this.showRoot = false;
    },
    onCancelSub() {
      this.showSub = false;
    },
    onCancel() {
      this.showDialog = false;
    },
    selectRoot() {
      this.showRoot = true;
    },
    pass() {
      this.showDialog = true;
    },
    initZZZ() {
      this.requestData = {
        page: 1,
        limit: 10
      };
      this.fatherCategoryName = "请选择大类";
      this.categoryName = "请选择小类";
      this.statusName = "审核过滤";
      this.getMsgList();
    },
    init() {
      this.requestData = {
        page: 1,
        limit: 10
      };
      if (this.active == 1) {
        this.needTime = true;
        this.requestData.status = "";
        this.requestData.pass = "off";
      }
      if (this.active == 2) {
        this.needTime = false;
        this.requestData.status = "";
        this.requestData.pass = "off";
      }
      if (this.active == 3) {
        this.requestData.status = "";
        this.needTime = false;
        this.requestData.pass = "on";
      }
      if (this.active == 4) {
        this.needTime = false;
        this.requestData.pass = "";
        this.requestData.status = "";
        this.list = [];
        this.stop = false;
        this.requestData.page = 1;
        this.getUndoList();
        return false;
      }
      if (this.active == 5) {
        this.needTime = false;
        this.requestData.status = "配送中";
        this.requestData.pass = "off";
      }
      if (this.active == 6) {
        this.active = 6;
        this.needTime = false;
        this.requestData.status = "已配送";
        this.requestData.pass = "off";
      }
      if (this.active == 7) {
        this.needTime = false;
        this.requestData.status = "已拒绝";
        this.requestData.pass = "off";
      }
      this.stop = false;
      this.getMsgList();
    },
    selectSub() {
      if (!this.fatherCategory) {
        mpvue.showToast({
          title: "请先选择大类",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      this.showSub = true;
    },
    getSub(id, type) {
      let self = this;
      getSub({ id: id }).then(res => {
        if (res.rows.length > 0) {
          if (type) {
            self.columnsSub = [];
            res.rows.map(item => {
              self.columnsSub.push({
                text: item.name,
                code: item.id
              });
            });
            return false;
          }
          self.columnsRoot = [];
          res.rows.map(item => {
            self.columnsRoot.push({
              text: item.name,
              code: item.id
            });
          });
        } else {
          if (type) {
            self.columnsSub = [];
          }
        }
      });
    },
    confirmDelivery(item, index) {
      let self = this;
      confirmDelivery({ id: item.id })
        .then(res => {
          mpvue.showModal({
            title: "提示",
            content: `确认收货成功`,
            showCancel: false,
            complete: function(res) {
              getMsgDetail({ id: item.id }).then(res => {
                let req = res.data;
                req.createTime = formatDate(req.createTime);
                self.list[index] = req;
                self.$forceUpdate();
                console.log(self.list[index]);
              });
            }
          });
        })
        .catch(err => {});
    },
    startDelivery(item, index) {
      let self = this;
      startDelivery({ id: item.id })
        .then(res => {
          mpvue.showModal({
            title: "提示",
            content: `审核成功`,
            showCancel: false,
            complete: function(res) {
              getMsgDetail({ id: item.id }).then(res => {
                let req = res.data;
                req.createTime = formatDate(req.createTime);
                self.list[index] = req;
                self.$forceUpdate();
                console.log(self.list[index]);
              });
            }
          });
        })
        .catch(err => {});
    },
    letsGoDelivery(item, index) {
      let self = this;
      letsGoDelivery({ id: item.id })
        .then(res => {
          mpvue.showModal({
            title: "提示",
            content: `开始配送成功`,
            showCancel: false,
            complete: function(res) {
              getMsgDetail({ id: item.id }).then(res => {
                let req = res.data;
                req.createTime = formatDate(req.createTime);
                self.list[index] = req;
                self.$forceUpdate();
                console.log(self.list[index]);
              });
            }
          });
        })
        .catch(err => {});
    },
    goDetail(id) {
      store.set("msgId", id);
      mpvue.navigateTo({
        url: "../msgDetail/main"
      });
    },
    supplement(id) {
      store.set("msgId", id);
      mpvue.navigateTo({
        url: "../supplement/main"
      });
    },
    add() {
      if (!store.get("loginInfo")) {
        mpvue.showModal({
          title: "提示",
          showCancel: false,
          content: "请先登录",
          success: function(res) {
            if (res.confirm) {
              mpvue.navigateTo({
                url: "../login/main"
              });
            }
          }
        });
        return false;
      }
      mpvue.navigateTo({
        url: "../add/main"
      });
    },
    toggle(e) {
      let type = e.mp.detail.name;
      if (type == 1) {
        this.active = 1;
        this.needTime = true;
        this.requestData.status = "";
        this.requestData.pass = "off";
      }
      if (type == 2) {
        this.active = 2;
        this.needTime = false;
        this.requestData.status = "";
        this.requestData.pass = "off";
      }
      if (type == 3) {
        this.active = 3;
        this.requestData.status = "";
        this.needTime = false;
        this.requestData.pass = "on";
      }
      if (type == 4) {
        this.active = 4;
        this.needTime = false;
        this.requestData.pass = "";
        this.requestData.status = "";
        this.list = [];
        this.stop = false;
        this.requestData.page = 1;
        this.getUndoList();
        return false;
      }
      if (type == 5) {
        this.active = 5;
        this.needTime = false;
        this.requestData.status = "配送中";
        this.requestData.pass = "off";
      }
      if (type == 6) {
        this.active = 6;
        this.needTime = false;
        this.requestData.status = "已配送";
        this.requestData.pass = "off";
      }
      if (type == 7) {
        this.active = 7;
        this.needTime = false;
        this.requestData.status = "已拒绝";
        this.requestData.pass = "off";
      }
      this.list = [];
      this.stop = false;
      this.requestData.page = 1;
      this.getMsgList();
    },
    logout() {
      if (!this.userInfo) {
        mpvue.navigateTo({
          url: "../login/main"
        });
        return false;
      }
      logout().then(res => {
        this.userInfo = "";
        store.clear();
        mpvue.showModal({
          title: "提示",
          showCancel: false,
          content: "退出登录成功",
          success: function(res) {
            if (res.confirm) {
              store.clear();
              mpvue.navigateTo({
                url: "../login/main"
              });
            }
          }
        });
      });
    },
    login() {
      mpvue.navigateTo({
        url: "../login/main"
      });
    },
    getRoot(fn) {
      getRoot().then(res => {
        this.getSub(res.data.id);
        fn && fn();
      });
    },
    initData() {
      this.list = [];
      this.stop = false;
      this.requestData.page = 1;
    },
    getMsgList() {
      let self = this;
      let time = this.timeToStr(new Date());
      let postData = {};
      if (this.needTime) {
        postData = {
          ...this.requestData,
          time: `${time}~2100-12-31`
        };
      } else {
        postData = {
          ...this.requestData
        };
      }
      getMsgList(postData).then(res => {
        self.count = res.count;
        if (res.data.length == 0 || !res.data) {
          self.stop = true;
          return false;
        }
        res.data.map(item => {
          item.createTime = formatDate(item.createTime);
        });
        self.list = [...self.list, ...res.data];
        console.log("list", self.list.length);
      });
    },
    getUndoList() {
      let self = this;
      getUndoList(this.requestData).then(res => {
        self.count = res.count;
        if (res.data.length == 0 || !res.data) {
          self.stop = true;
          return false;
        }
        res.data.map(item => {
          item.createTime = formatDate(item.createTime);
        });
        self.list = [...self.list, ...res.data];
        console.log("list", self.list.length);
      });
    },
    timeToStr(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (month < 10) {
        month = `0${month}`;
      }
      let day = date.getDate();
      if (day < 10) {
        day = `0${day}`;
      }
      return `${year}-${month}-${day}`;
    }
  },
  onReachBottom() {
    if (this.stop) {
      return false;
    }
    this.requestData.page = this.requestData.page + 1;
    if (this.active == 4) {
      this.getUndoList();
    } else {
      this.getMsgList();
    }
  },
  created() {},
  onLoad() {
    let self = this;
  },
  onShow() {
    let self = this;
    this.list = [];
    this.userInfo = store.get("loginInfo");
    // this.needTime = true;
    this.stop = false;
    if (this.userInfo) {
      this.userName = this.userInfo.name;
      this.getRoot(function() {
        self.init();
      });
    } else {
      mpvue.navigateTo({
        url: "../login/main"
      });
    }
  }
};
</script>

<style scoped>
.headerIcon {
  height: 84rpx;
  border-radius: 84rpx;
  background: #eb6117;
  width: 84rpx;
  text-align: center;
  line-height: 80rpx;
  font-weight: bold;
  font-size: 40rpx;
}

.handleButton {
  background: #fff;
  font-size: 28rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  color: #222222;
}

.timeArea {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #bfbfbf;
}

.isTrue {
  background: #f56c6c;
  color: #fff;
  padding: 2rpx 16rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
}

.handleArea {
  display: flex;
  padding: 24rpx;
  text-align: right;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0;
}

.count {
  margin: 30rpx 40rpx;
}

.badge {
  background: #222222;
  color: #fff;
  display: inline;
  padding: 10rpx 24rpx;
  font-size: 26rpx;
  border-radius: 4rpx;
}

.handle {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 30rpx;
}

.confirmButton {
  background: #ffc300;
  color: #222222;
  padding: 12rpx 24rpx;
  margin-right: 16rpx;
  border-radius: 32rpx;
}

.infoButton {
  background: #222222;
  color: #ffffff;
  padding: 12rpx 0;
  border-radius: 32rpx;
  width: 160rpx;
  text-align: center;
}

.main {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  padding-bottom: 24rpx;
}

.leftArea {
  flex: 1;
  font-size: 32rpx;
}

.rightArea {
  font-size: 48rpx;
  color: #f56c6c;
}

.active {
  font-weight: bold;
  font-size: 36rpx;
  transition: all 0.3s;
}

.addMod {
  margin: 30rpx;
  background: #fff;
  width: 160rpx;
  height: 160rpx;
  line-height: 160rpx;
  text-align: center;
}

.codeTxt {
  font-size: 24rpx;
  background: #d9d9d9;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.noData {
  text-align: center;
  color: #9c9c9c;
  font-size: 28rpx;
}

.logutArea {
  position: absolute;
  right: 40rpx;
  top: 26rpx;
}

.logutArea img {
  width: 30rpx;
  height: 30rpx;
}

/* .handleButton {
  padding: 10rpx 24rpx;
  background: #07c160;
  color: #fff;
  border-radius: 8rpx;
} */

.num {
  color: #3c3c3c;
  font-size: 30rpx;
  margin-top: 16rpx;
}

.checkStyle {
  vertical-align: middle !important;
  margin-left: 5px !important;
}

.bottomTips {
  margin-top: 40rpx;
  text-align: center;
  margin-bottom: 60rpx;
  font-size: 28rpx;
  color: #a4a4a4;
}

.checkBox {
  display: inline;
}

.status {
  background: #ffc300;
  color: #222222;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  font-weight: bold;
  border-radius: 40rpx;
}

.idd {
  background: #c81623;
  padding: 6rpx 12rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}

.handleDiv {
  padding: 30rpx 20rpx;
  font-size: 28rpx;
  background: #fff;
  display: flex;
}

.userInfo {
  background: #ffc300;
  display: flex;
  color: #fff;
  align-items: center;
  flex-direction: column;
  margin: 24rpx;
  border-radius: 14rpx;
  height: 100rpx;
  line-height: 100rpx;
}

.titleArea {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.add_icon {
  width: 48rpx;
  height: 48rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.undo {
  font-size: 26rpx;
  font-weight: normal;
  background: #1989fa;
  color: #fff;
  margin-right: 20rpx;
  padding: 6rpx 14rpx;
  border-radius: 6rpx;
}

.tagN {
  color: #fff;
  font-weight: bold;
  background: #1989fa;
  padding: 8rpx 20rpx;
  border-radius: 6rpx;
}

.userName {
  flex: 1;
  padding-left: 30rpx;
  font-weight: bold;
}

.source {
  color: #eb6117;
}

.card {
  display: flex;
  flex-direction: column;
  margin: 20rpx 36rpx;
  font-size: 28rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 6rpx 16rpx #ebebeb;
}

/* .rightArea {
  color: #969799;
}

.leftArea {
  flex: 1;
  line-height: 48rpx;
} */

.topArea {
  font-size: 30rpx;
  display: flex;
  padding: 24rpx;
  align-items: center;
  justify-content: space-between;
}

.bottomArea {
  border-top: 1px solid #ebedf0;
  padding: 24rpx;
  text-align: right;
}

.card {
  padding: 0;
}

.project {
  font-weight: bold;
  font-size: 36rpx;
  flex: 1;
}
.phone {
  color: #eb6117;
  font-weight: bold;
}
</style>
